.navbar {
    background-color: #188db1!important; /* Azul personalizado */
    display: flex;
    justify-content: space-between; /* Separa los grupos en los extremos */
    align-items: center;
    width: 100%;
    padding: 3px;
    z-index: 1060; /* Más alto que el backdrop, pero menos que el modal */
}

.grupo-izquierda, .grupo-derecha {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado entre elementos del grupo */
}

.formulario-busqueda {
    flex-grow: 1; /* Ocupa el espacio disponible en el centro */
    display: flex;
    justify-content: center;
    position: relative;
}

.input-busqueda {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 450px; /* Ancho máximo */
   
}

/* Ajusta el tamaño del logo */
.logo img {
    max-height: 50px; /* Tamanho estándar */
    width: auto;
    
}


@media (max-width: 991px) {
    .logo img {
        max-height: 35px; /* Tamanho para dispositivos móviles */
    }
}

@media (max-width: 425px) {
    .logo img {
        max-height: 25px; /* Tamanho para dispositivos móviles */
    }
}

/* Media Query para pantallas pequeñas (menor a 768px) */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap; /* Permite que los elementos se distribuyan en dos filas */
        gap: 10px; /* Espacio entre las filas */
    }

    /* Aseguramos que el Grupo 1 y Grupo 2 estén en la misma línea */
    .grupo-izquierda, .grupo-derecha {
        flex: 1 1 48%; /* Ocupan un 48% del ancho y se alinean en una fila */
        justify-content: center; /* Centra los elementos */
    }

    /* La barra de búsqueda se coloca en la segunda fila, ocupando todo el ancho */
    .formulario-busqueda {
        width: 100% ; /* Ocupa todo el ancho */
        justify-content: center;
        order: 2; /* Asegura que esté después de los dos grupos */
    }
}

/* Media Query para pantallas menores a 403px */
@media (max-width: 403px) {
    /* Ocultar los textos dentro de los botones */
    .btn-usuario .texto,
    .btn-categorias .texto {
        display: none; /* Oculta solo los textos */
    }
}



.btn-categorias {
  background-color: #188db1!important; /* Azul personalizado */
    color: white;
    border: none;
    border-radius: 50px;
    padding: 5px 10px;
    
    
}

/* Base transitions for all buttons */
.btn-categorias,
.btn-carrito,
.btn-usuario,
.btn-buscar {
    transition: all 0.3s ease-in-out;
}

/* All hover effects grouped together */
.btn-categorias:hover {
    background-color: rgba(50, 97, 136, 0.63) !important;
}

.btn-carrito:hover {
    background-color: rgba(50, 97, 136, 0.63) !important;
}

.btn-usuario:hover {
    background-color: rgba(50, 97, 136, 0.63) !important;
}

.btn-buscar:hover {
    background-color: rgba(50, 97, 136, 0.63) !important;
    transform: scale(1.3);
}

.btn-carrito {
    position:relative;
    background-color: #188db1!important; /* Azul personalizado */
    color: white;
    border: none;
    border-radius: 50px;
    padding: 5px 10px;

    
    
}


.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: rgb(43, 42, 42); /* Fondo del contador */
    color: white;  /* Color del número */
    border-radius: 100%;
    padding: 5px 10px;
    font-size: 12px; /* Aumentado de 10px a 12px */
    font-weight: bold; /* Añadido para mejor visibilidad */
    min-width: 20px; /* Asegura un ancho mínimo para el círculo */
    text-align: center; /* Centra el número */
    line-height: 1; /* Ajusta la alineación vertical */
}

.btn-usuario {
    background-color: #188db1!important; /* Azul personalizado */
    color: white;
    border: none;
    border-radius: 50px;
    padding: 5px 10px;
}



.formulario-busqueda input {

    border: none;
    border-radius: 50px;
    padding: 5px 13px;
}

.formulario-busqueda input:focus {
    outline: none;
}



.btn-buscar {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    margin-right: -410px!important; /* Ajusta el margen derecho del botón */
    margin-top: 4px;
    background-color: #188db1!important; /* Azul personalizado */
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 100%;
    transform: scale(1.2);
   
    
    cursor: pointer; /* Cambia el cursor a pointer */
}

.btn-buscar i {
    font-size: 15px; /* Ajusta el tamaño según lo necesites */
}

@media (min-width: 769px) and (max-width: 991px) {
    .btn-buscar {
        margin-right: -310px!important; /* Ajusta el margen derecho del botón */
    }
}

@media (max-width: 484px) and (min-width: 320px) {
    .btn-buscar {
        position: absolute;
        right: 415px; /* Ajusta la posición dentro del input */
        
    }

    
}